<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">武术比赛管理系统</div>
            <el-form :model="ruleForm" :rules="rules" label-width="70px" ref="login" 
                status-icon class="ms-content">
                <el-form-item prop="username" label="用户名">
                    <el-input v-model="ruleForm.username" clearable placeholder="请输入手机号或用户名">
                        <template #prepend>
                            <el-button icon="el-icon-user"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码" class="form-item">
                    <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password"
                        show-password clearable>
                        <template #prepend>
                            <el-button icon="el-icon-lock"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="verification" label="验证码" class="form-item">
                    <el-input tyep="verification" 
                        placeholder="请输入验证码" v-model="ruleForm.verification"
                        @keyup.enter="submitForm()">
                        <template #prepend>
                            <el-switch
                                v-model="showVerification"
                                inline-prompt
                            >
                            </el-switch>
                        </template>
                    </el-input>
                    <img class="imgVerification" :src="imgVeri" alt="验证码" v-show="showVerification">
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm()">登录</el-button>
                    <el-button type="warning" @click="toRegister()">注册</el-button>
                </div>
                <p class="login-tips">Tips : 点击滑块切换验证码。</p>
            </el-form>
        </div>
    </div>
</template>

<script>
import { ref, reactive, watch } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import secret from "../utils/secret";

export default {
    setup() {
        const router = useRouter();
        const store = useStore();
        store.commit("clearTags");


        const ruleForm = reactive({
            username: "",
            password: "",
            verification:"",
        });
        const rules = {
            username: [
                {
                    required: true,
                    message: "请输入用户名",
                    trigger: "blur",
                },
            ],
            password: [
                { required: true, message: "请输入密码", trigger: "blur" },
            ],
            verification:[
                { required: true, message: "请输入验证码", trigger: "blur" },
            ]
        };
        const login = ref(null);
        
        
        
        const showVerification = ref(false);
        const imgVeri = ref('');
        watch(showVerification, (newVal) => {
            if (newVal) {
                imgVeri.value =
                    // "http://47.103.118.46:8081/captcha?" + new Date().getTime();
                    "http://localhost:8081/captcha?" + new Date().getTime();
            }
        },{immediate:true});
        
        const submitForm =  () => {
            login.value.validate((valid) => {
                if (valid) {
                    store.dispatch("Login",{
                        username: ruleForm.username,
                        password:secret.Encrypt(ruleForm.password),
                        code:ruleForm.verification
                    }).then(res =>{
                        // console.log(res);
                        if(res.code === 200){
                            store.commit("set_token", res.obj.tokenHead + " " + res.obj.token);
                            store.commit("set_username",ruleForm.username);

                            ElMessage({
                                message: "登录成功",
                                type: "success",
                                center: true,
                            });
                            router.push("/dashboard");
                        }else{
                            ElMessage({
                                message: res.message,
                                type: "error",
                                center: true,
                            });
                        }
                    }).catch(err=>{
                        console.log("登录异常",err);
                    })
                    
                } else {
                    ElMessageBox({
                        title: "提示",
                        message: "请检查表单填写是否规范",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        center:true
                    });
                }
            });
        };
        
        
        const toRegister = () => {
            console.log("准备跳转到注册页面")
            router.push("/register");
        };

        return {
            ruleForm,
            imgVeri,
            showVerification,
            rules,
            login,
            submitForm,
            toRegister,
        };
    
    },
}  
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../assets/img/background.jpeg);
    background-size: 100%;
    opacity: 0.7;
}
.ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    color: black;
    border-bottom: 1px solid #f6f6f6;
}

.imgVerification{
    width: 100px;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    margin:15px 90px -15px 50px;
}
.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    margin: -190px 0 0 -175px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;

}
.ms-content {
    padding: 30px 30px;
}
.form-item{
    margin-top: 40px;
    color: black;
}
.login-btn {
    text-align: center;
    display: flex;
}
.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}
.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: black;
}
</style>